<template>
	<view class="bill-body">
		<view class="u-flex u-row-between bill-select">
			<view class="u-flex" @click="shows.search=true">
				<view class="u-margin-right-8">筛选</view>
				<image src="@/static/img/icon_screen_supplier@2x.png"></image>
			</view>
			<view class="u-flex" @click="shows.type = true">
				<view class="u-margin-right-8">{{getStatusLabel(list,querys.type)}}</view>
				<image src="@/static/img/ico_arrowdown.png"></image>
			</view>
		</view>
		<view class="bill-list" v-if="tableData.length>0">
			<view class="bill-items u-margin-bottom-20" v-for="(item,index) in tableData" :key="index">
				<image class="bill-items_checked" v-if="item.status !== 0"
					src="@/static/img/icon-select_disabled@2x.png"></image>
				<image class="bill-items_checked" v-else-if="item.checked" src="@/static/img/icon_odd_numbers.png"
					@click="handleChecked(index)">
				</image>
				<image class="bill-items_checked" v-else src="@/static/img/icon_select.png"
					@click="handleChecked(index)"></image>
				<view class="bill-item" @click="handleDetails(item)">
					<view class="cost">
						<view class="u-font-30">{{getStatusLabel(expenseType,item.type)}}</view>
						<view class="u-font-28">￥{{item.amount | thousands}}</view>
					</view>
					<view class="u-flex u-row-between">
						<view class="bill-status">
							<image src="@/static/img/icon_clock.png"></image>
							<view>{{ getStatusLabel(billType, item.status) }}</view>
						</view>
						<view class="bill-details">
							<view>明细</view>
							<image src="@/static/img/icon_arrowright.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
			margin-top="160" text="您目前还没有数据～"></u-empty>
		<view class="bill-bottom">
			<view class="u-flex">
				<image v-if="getIsCheckAll ==='1'" src="@/static/img/icon_odd_numbers.png" @click="handleCheckedAll">
				</image>
				<image v-else-if="getIsCheckAll ==='2'" src="@/static/img/icon_select.png" @click="handleCheckedAll">
				</image>
				<image v-else-if="getIsCheckAll ==='3'" src="@/static/img/icon-select_disabled@2x.png"></image>
				<view class="u-font-28">全选</view>
				<view class="u-margin-left-40">
					<view>
						<text class="u-font-24">总计：</text>
						<text class="u-font-30" style="color: #F76260;">￥ {{getCheckTotal | thousands}}</text>
					</view>
					<view class="u-font-24" style="color: #A1A1A1;">已选 {{getCheckLength}} 项</view>
				</view>
			</view>
			<view>
				<u-button type="success" shape="circle" :custom-style="{
					'background':' #0FBD7F',
					'padding':'6px 22px',
					'height': '30px',
					'font-size':'13px'
				}" @click="handlePayment">去支付</u-button>
			</view>
		</view>
		<u-select v-model="shows.type" :list="list" @confirm="onTypeChange"></u-select>
		
		<u-popup @close="shows.search = false" closeable v-model="shows.search" mode="bottom" border-radius="12">
			<view class="search-title">筛选</view>
			<view class="search-form">
				<u-form :model="querys" label-position="top">
					<u-form-item v-if="querys.type === 0" label="流水号" :border-bottom="false">
						<u-search v-model="querys.innerId" height="72" :show-action="false"
							placeholder="请输入流水号"></u-search>
					</u-form-item>
					<u-form-item v-if="querys.type === 1" label="车架号" :border-bottom="false">
						<u-search v-model="querys.vin" height="72" :show-action="false" placeholder="请输入车架号"></u-search>
					</u-form-item>

					<u-form-item label="费用类型" :border-bottom="false">
						<view class="unclickable-input" @click="shows.costType = true">
							<text :class="querys.typeList?'exist':'inexistence'">
								{{getStatusLabel(getCostType,querys.typeList) || '请选择状态'}}
							</text>
						</view>
					</u-form-item>


					<u-form-item  :border-bottom="false">
						<view class="u-flex">
							<u-button class="u-flex-1 u-margin-right-10" shape="circle"
								@click="handleReset">重置</u-button>
							<u-button type="success" :custom-style="{
							'background':'#0FBD7F',
							'color':'#fff'
						}" class="u-flex-1" shape="circle" @click="handleSelect">确定</u-button>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-popup>
		<u-select v-model="shows.costType" :list="getCostType" @confirm="onCostTypeChange"></u-select>
	</view>
</template>

<script>
	import {
		expenseType,
		billType,
		otherExpensesType,
		exportOrderExpenseType,
		getStatusLabel
	} from '@/utils/status.js'
	import {
		addition
	} from '@/utils/compute.js'
	export default {
		data() {
			return {
				expenseType,
				billType,
				otherExpensesType,
				exportOrderExpenseType,
				shows: {
					type: false,
					search: false,
					costType: false
				},
				list: [{
					value: 0,
					label: '交易订单'
				}, {
					value: 1,
					label: '车费用'
				}],
				querys: {
					current: 1,
					size: 10,
					type: 0
				},
				tableData: []
			}
		},
		computed: {
			getIsCheckAll() {
				// 1-全选  2-未被权限 3-没有可以选择的
				const nonPayment = this.tableData.find(x => {
					return x.status === 0
				})
				if (!nonPayment) return '3'

				const item = this.tableData.find(x => {
					return !x.checked && x.status !== 1
				})
				if (!item) return '1'
				return '2'
			},
			getCheckLength() {
				const list = this.tableData.filter(x => {
					return x.checked
				})
				return list.length
			},
			getCheckTotal() {
				const total = this.tableData.reduce((a, x) => {
					let amount = 0;
					if (x.checked) {
						amount = x.amount
					}
					return addition(a, amount)
				}, 0)
				return total || 0
			},
			getCostType(){
				if(this.querys.type === 0){
					return exportOrderExpenseType
				}else if (this.querys.type === 1){
					return otherExpensesType
				}
				return []
			}
		},
		onLoad(options) {
			if (options.type) {
				this.querys.type = options.type
			}
			if (options.innerId) {
				this.querys.innerId = options.innerId
			}
			if (options.vin) {
				this.querys.vin = options.vin
			}
		},
		onShow() {
			this.handleSelect()
		},
		onReachBottom() {
			this.querys.current += 1;
			this.getTableList()
		},
		methods: {
			async handleDetails(item) {
				const params = {
					id: item.id
				}
				let res;
				if (this.querys.type * 1 === 0) {
					res = await this.$api.getBillOrderDetail(params)
				} else if (this.querys.type * 1 === 1) {
					res = await this.$api.getBillCarDetail(params)
				}
				let url;
				switch (item.type) {
					case 8:
						// 仓储
						url = '/pages/bill/storageCharge'
						break;
					case 9:
						// 平台服务费
						url = '/pages/bill/serviceCharge'
						break;
					case 11:
						// 额外费用
						url = '/pages/bill/extraCharges'
						break;
					default:
						// 检测费、上牌、报关和装箱费用
						url = '/pages/bill/inspectionCost'
						break;
				}
				uni.navigateTo({
					url: `${url}?type=${item.type}`,
					success(d) {
						d.eventChannel.emit('BillDetails', res.result)
					}
				})
			},
			handlePayment() {
				const list = this.tableData.filter(x => {
					return x.checked
				})
				if (list.length <= 0) {
					this.$toast("请选择支付项");
					return
				}
				uni.navigateTo({
					url: `/pages/bill/paymentType?type=${this.querys.type}`,
					success(res) {
						res.eventChannel.emit('BillChecked', list)
					}
				})
			},
			handleCheckedAll() {
				const list = JSON.parse(JSON.stringify(this.tableData))
				this.tableData = list.map(x => {
					if (this.getIsCheckAll === '1') {
						x.checked = false
					} else if (x.status === 0 && this.getIsCheckAll === '2') {
						x.checked = true
					}
					return x
				})
			},
			handleChecked(index) {
				const item = JSON.parse(JSON.stringify(this.tableData[index]))
				if (item.checked) {
					this.$set(this.tableData[index], 'checked', false)
				} else {
					this.$set(this.tableData[index], 'checked', true)
				}
			},
			onCostTypeChange(list) {
				this.querys.typeList = list[list.length - 1].value
			},
			onTypeChange(list) {
				this.$set(this, 'querys', {
					current: 1,
					size: 10,
					type: list[list.length - 1].value
				})
				this.getTableList()
			},
			async getTableList() {
				const params = JSON.parse(JSON.stringify(this.querys));
				const that = this
				uni.showLoading({
					title: '加载中...'
				});
				let res;
				if (params.type === 0) {
					res = await that.$api.getOrderBillList(params)
				} else if (params.type === 1) {
					res = await that.$api.getCarBillList(params)
				}
				if (params.current === 1) {
					that.tableData = res.result.records
				} else {
					that.tableData = [...that.tableData, ...res.result.records]
				}
				uni.hideLoading();
			},
			handleSelect() {
				this.querys.current = 1
				this.getTableList()
				this.shows.search = false
			},
			handleReset() {
				const type = this.querys.type
				this.querys = {
					current: 1,
					size: 10,
					type
				}
				this.getTableList()
				this.shows.search = false
			},
			getStatusLabel
		}
	}
</script>

<style scoped lang="less">
	.search-title {
		margin-top: 30rpx;
		font-weight: bold;
		color: #202020;
		font-size: 16px;
		text-align: center;
	}

	.search-form {
		margin: 20px;

		/deep/ .u-icon-wrap {
			display: none !important;
		}
	}

	.bill-body {
		padding: 10px 15px 64px 15px;
		color: #666666;
		font-size: 13px;

		.bill-select {
			image {
				width: 16px;
				height: 16px;
			}
		}

		.bill-list {
			margin: 20px 0 30px 0;

			.bill-items {
				display: flex;
				align-items: center;

				.bill-items_checked {
					width: 16px;
					height: 16px;
				}

				.bill-item {
					margin-left: 10px;
					background: #FFFFFF;
					border-radius: 8px;
					padding: 15px;
					flex: 1;

					.cost {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10px;
					}

					.bill-status {
						display: flex;
						align-items: center;

						&>image {
							width: 20px;
							height: 20px;
							z-index: 2;
						}

						&>view {
							border-radius: 8px;
							border-right: 1px solid #0FBD7F;
							border-top: 1px solid #0FBD7F;
							border-bottom: 1px solid #0FBD7F;
							color: #0FBD7F;
							padding: 1px 5px 1px 11px;
							font-size: 10px;
							margin-left: -8px;
						}
					}

					.bill-details {
						color: #87888D;
						font-size: 13px;
						display: flex;
						align-items: center;

						&>image {
							width: 12px;
							height: 12px;
						}
					}
				}
			}

		}

		.bill-bottom {
			z-index: 5;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			padding: 10px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666666;

			image {
				width: 16px;
				height: 16px;
				margin-right: 14px;
			}
		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>